<!--
 * @Author: 涵崽
 * @Date: 2023-11-06 09:33:19
 * @email: 1045654@qq.com
 * @gitee: https://gitee.com/han-zai
 * @LastEditors: 涵崽
 * @LastEditTime: 2023-11-06 09:33:37
 * @Description: 树形菜单自定义权限，data数据前端写死的(可以存放在后台),发送请求把权限数组存储在后台
-->
<template>
  <div>
    <div v-if="isShow">
      <input type="checkbox" ref="all" @click="selecAll" />全选
    </div>
    <div v-else><input type="checkbox" @click="selecDelAll" />取消全选</div>

    <div class="bg">
      <div class="one" v-for="(item, index) in data" :key="index">
        <input
          ref="input"
          class="input"
          type="checkbox"
          :value="item.id"
          @change="getvalue(item.id, 0, true)"
        />{{ item.label }}
        <!-- @click="getvalue($event)" -->

        <div class="two" v-if="item.children">
          <span v-for="(i, index) in item.children" :key="index">
            <br v-if="i.children && !item.children[index - 1].children" />
            <input
              ref="input"
              class="input"
              type="checkbox"
              :data-pid="item.id"
              :value="i.id"
              @change="getvalue(i.id, item.id, true)"
            />{{ i.label }}
            <!-- @click="getvalue($event)" -->

            <div class="three" v-if="i.children">
              <span v-for="(q, index) in i.children" :key="index">
                <input
                  ref="input"
                  class="input"
                  type="checkbox"
                  :value="q.id"
                  :data-pid="i.id"
                  @change="getvalue(q.id, i.id, true)"
                />{{ q.label }}
                <!-- @click="getvalue($event)" -->
              </span>
            </div>
          </span>
        </div>
      </div>
    </div>
    <el-button @click="submit" type="primary">确定</el-button>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      checked: "",
      isShow: true,
      data: [
        {
          id: 1,
          label: "岗位大厅",
          children: [
            {
              id: 101,
              label: "导出",
            },
            {
              id: 102,
              label: "导入",
            },
            {
              id: 103,
              label: "添加岗位",
              children: [
                {
                  id: 10301,
                  label: "上传合同",
                },
              ],
            },
            {
              id: 108,
              label:
                "查看(只能查看详情及除合同外的视频/图片，如需查看合同请勾选修改合同权限)",
            },
            {
              id: 104,
              label: "修改",
              children: [
                {
                  id: 10401,
                  label: "修改详情",
                },
                {
                  id: 10402,
                  label: "修改合同",
                },
              ],
            },
            {
              id: 105,
              label: "人员",
              children: [
                {
                  id: 10501,
                  label: "查看人员详情",
                },
                {
                  id: 10502,
                  label: "修改人员详情",
                },
                {
                  id: 10503,
                  label: "导入",
                },
                {
                  id: 10504,
                  label: "导出",
                },
                {
                  id: 10505,
                  label: "添加人员",
                },
                {
                  id: 10506,
                  label: "结算",
                },
                {
                  id: 10507,
                  label: "记录",
                },
              ],
            },
            {
              id: 106,
              label: "结算",
            },
            {
              id: 107,
              label: "统计",
            },
          ],
        },
        {
          id: 2,
          label: "我的岗位",
          children: [
            {
              id: 201,
              label: "导出",
            },
            {
              id: 208,
              label:
                "查看(只能查看详情及除合同外的视频/图片，如需查看合同请勾选修改合同权限)",
            },

            {
              id: 204,
              label: "修改",
              children: [
                {
                  id: 20401,
                  label: "修改详情",
                },
                {
                  id: 20402,
                  label: "修改合同",
                },
              ],
            },
            {
              id: 205,
              label: "人员",
              children: [
                {
                  id: 20501,
                  label: "查看人员详情",
                },
                {
                  id: 20502,
                  label: "修改人员详情",
                },
                {
                  id: 20503,
                  label: "导入",
                },
                {
                  id: 20504,
                  label: "导出",
                },
                {
                  id: 20505,
                  label: "添加人员",
                },
              ],
            },
            {
              id: 206,
              label: "结算",
            },
            {
              id: 207,
              label: "统计",
            },
          ],
        },
        {
          id: 3,
          label: "我的待办",
        },
        {
          id: 4,
          label: "我的结算",
        },
        {
          id: 5,
          label: "人员列表",
        },
        {
          id: 6,
          label: "结算统计",
        },
        {
          id: 7,
          label: "权限管理",
        },
        {
          id: 8,
          label: "岗位统计",
        },
        {
          id: 9,
          label: "角色管理",
        },
      ],
      mydata: [],
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      let id = this.$route.params.id;
      httpApi.UserApi.getUserDetail(id).then(res => {
        let arr = res.data.data.url;
        if (arr.length == this.$refs.input.length) {
          this.selecAll();
          this.$refs.all.checked = true;
        }
        for (let id of arr) {
          for (let item of this.$refs.input) {
            if (id == item.value) {
              item.checked = true;
            }
          }
        }
      });
    },
    // input点击
    getvalue(myid, pid) {
      /**
       * pid 父级多选框的id
       * myid 当前元素的id
       */
      //  选中上级的复选框的状态
      this.delChecked(pid);
      // 取消下级复选框的选中状态
      this.delchildrenchecked(myid);
    },
    // 选中上级
    delChecked(pid) {
      let input = this.$refs.input; // 所有复选框
      // 点击子级的时候勾选父级的复选框
      for (let item of input) {
        // 如果是当前点击的复选框的上级
        if (item.value == pid) {
          // 修改选中状态
          item.checked = true;
          // item.dataset.pid 最外层复选框的id
          if (item.dataset.pid) {
            // 递归修改上级选中状态
            this.delChecked(item.dataset.pid);
          }
        }
      }
    },
    // 取消下级选中
    delchildrenchecked(myid) {
      // 过滤所有的复选框，找到当前复选框的下级
      const childInputs = this.$refs.input.filter(
        input => input.dataset.pid == myid
      );
      /**
       * childInputs 所有的下级
       */
      for (let childInput of childInputs) {
        // 循环修改每一个下级的复选框状态福
        childInput.checked = false;
        this.delchildrenchecked(childInput.value); // 递归取消更深层级的复选框选择状态
      }
    },
    // 全选
    selecAll() {
      this.isShow = false; //控制权限按钮是否显示
      let input = this.$refs.input; // 找到所有多选框
      for (let item of input) {
        // 修改选中状态
        item.checked = true;
      }
    },
    // 取消全选
    selecDelAll() {
      this.isShow = true; // 修改当前按钮的显示状态
      let input = this.$refs.input; // 所有的复选框
      for (let item of input) {
        // 修改选中状态
        item.checked = false;
      }
    },
    // 提交
    submit() {
      let input = this.$refs.input; //所有的复选框
      let arr = [];
      for (let item of input) {
        // 遍历所有复选框，找到选中状态的复选框
        if (item.checked == true) {
          // 添加进数组
          arr.push(item.value);
        }
      }
      let id = this.$route.params.id;
      httpApi.UserApi.editUserDetail(id, arr).then(res => {
        this.$message({
          message: res.data.msg,
          type: "success",
        });
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.input {
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.bg {
  background: rgba($color: #000000, $alpha: 0);
}
.one {
  // border-bottom: 1px solid #000000;
  width: 100%;
  background: rgba($color: #fff, $alpha: 0.5);
  .span {
    display: block;
  }
}
.two {
  margin-left: 40px;
}
.three {
  margin-left: 40px;
}
</style>
